<template>
	<view class="pagesbg">
		<!-- 密码 -->
		<uni-popup ref="psdPopup" type="center" :animation="true" @change="changePopup($event,'psdPopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="psdBox">
						<view class="psdBox-wrapper">
							<view class="psdBox-header">请输入交易密码</view>
							<view class="psdBox-input">
								<input type="password" v-model="password" placeholder="请输入交易密码" placeholder-class="inputStyle">
							</view>
							<view class="psdBox-btnBox">
								<view class="psdBox-close" @tap="hidePopup('psdPopup')">取消</view>
								<view class="psdBox-confirm" @tap.stop="$u.throttle(psdSubmit,1000)">确定</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 头部 -->
		<view class="header_bar header_fixed header_main">
			<view class="header">
				<view class="header-goBack" @tap.stop="$tools.back(1)"></view>
				<view class="header-title">确认订单</view>
			</view> 
		</view> 
		
		<view class="orderWays">
			<view class="orderWays-wrapper">
				<view class="orderWays-box" @tap.stop="checkWays()">
					<image class="img" src="../../static/public/addr-1.png" mode=""></image>
					<view class="news" v-if="userAddressList.length == 0">
						<view class="addr">暂无地址！请添加地址</view>
					</view>
					<view class="news" v-else>
						<view class="data">
							<view class="info">{{ address.consignee }}</view>
							<view class="info">{{ address.phone }}</view>
						</view>
						<view class="addr">
							{{ address.address  }}
						</view>
					</view>
					<image class="next" src="@/static/public/icon-next.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="goods">
			<view class="goods-list">
				<view class="goods-list__item" v-for="(item,index) in goodsDetail" :key="index">
					<view class="imgBox">
						<image :src="item.productInfo.image" mode=""></image>
					</view>
					<view class="content">
						<view class="name">{{ item.productInfo.storeName }}</view>
						<view class="norms">
							<view class="norms-title">规格：{{ item.productInfo.attrInfo.sku }}</view>
						</view>
						<view class="operateBox">
							<view class="price">¥{{ item.truePrice }}</view>
							<view class="operateBox-box">
								<image @tap="redece()" src="@/static/public/reduce-white.png" mode=""></image>
								<input type="number" :value="item.cartNum" maxlength="999" disabled="disabled">
								<image @tap="add()" src="@/static/public/add-white.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="contentBoxBg">
			<view class="buyWaysList">
				<view class="buyWaysList-list">
					<view class="buyWaysList-list__item">
						<view class="left">
							<view class="title">商品金额</view>
						</view>
						<view class="right">
							<view class="price">¥{{ priceGroup.totalPrice }}</view>
						</view>
					</view>
					<view class="buyWaysList-list__item" v-if="Number(priceGroup.storePostage) > 0">
						<view class="left">
							<view class="title">运费</view>
						</view>
						<view class="right">
							<view class="price">¥{{ priceGroup.storePostage }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="contentBoxBg">
			<view class="buyWaysList">
				<view class="buyWaysList-headerTitle">支付方式</view>
				<view class="buyWaysList-list">
					<view class="buyWaysList-list__item" @tap.stop="checkActive(1)">
						<view class="left">
							<image src="@/static/public/wechat-1.png" mode=""></image>
							<view class="tips">微信</view>
						</view>
						<view class="check">
							<image :src="waysActive == 1 ? '../../static/public/check-active.png' : '../../static/public/check.png'" mode=""></image>
						</view>
					</view>
					<view class="buyWaysList-list__item" @tap.stop="checkActive(2)">
						<view class="left">
							<image src="@/static/public/alipay-1.png" mode=""></image>
							<view class="tips">支付宝</view>
						</view>
						<view class="check">
							<image :src="waysActive == 2 ? '../../static/public/check-active.png' : '../../static/public/check.png'" mode=""></image>
						</view>
					</view>
					<view class="buyWaysList-list__item" @tap.stop="checkActive(3)">
						<view class="left">
							<image src="@/static/public/integral.png" mode=""></image>
							<view class="tips">商城积分</view>
						</view>
						<view class="check">
							<image :src="waysActive == 3 ? '../../static/public/check-active.png' : '../../static/public/check.png'" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="confirmBottom">
			<view class="confirmBottom-left">
				<view class="title">合计
					<text class="active" v-if="priceGroup">{{ toFloor(jia(priceGroup.totalPrice,priceGroup.storePostage)) }}</text>
				</view>
			</view>
			<view class="confirmBottom-right">
				<view class="btn" @tap.stop="$u.throttle(addOrder,1000)">提交订单</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				waysActive: 0,
				goodsDetail:{},
				num: 1,
				address: {},
				userAddressList: [],
				addressId: '',
				address_id: '',
				password: '',
				orderId: '',
				userInfo: {},
				userMoney: {},
			}
		},
		onLoad(options) {
			this.init();
			if(options.value1){
				this.address = JSON.parse(decodeURIComponent(options.value1));
			}
			if(options.value2){
				this.goodsDetail = JSON.parse(decodeURIComponent(options.value2));
			}
			if(options.value3){
				this.priceGroup = JSON.parse(decodeURIComponent(options.value3));
			}
			if(options.value4){
				this.orderNo = options.value4;
			}
			// console.log("goodsDetail：",this.goodsDetail);
			// console.log("address：",this.address,'-----priceGroup：',this.priceGroup);
			if(this.address != null){
				this.addressId = this.address.id;
			}
		},
		onShow() {
			this.init();
			this.address_id = uni.getStorageSync('address_id');
		},
		methods: {
			init(){
				this.getUserInfo();
				this.getAddrList();
				// this.getUserMoney();
			},
			checkWays(){
				this.$tools.jump('/pages/address/address',1);
			},
			// 支付订单
			addOrder(){
				if(this.userInfo.isPayPwd == '1'){
					return this.$tools.toastJump('请设置交易密码','/pages/setup/editPayPsd');
				}
				if(!this.addressId || this.addressId == undefined || this.addressId == null){
					return this.$tools.toast('请选择或者绑定收货地址');
				}
				if(this.waysActive == 0){
					return this.$tools.toast('请选择支付方式');
				}
				if(this.waysActive == 3){
					this.openPopup('psdPopup');
				}else{
					this.$tools.noOpen();
					// this.onlinePay();
				}
			},
			onlinePay(){
				var data = {
					"addressId": this.addressId,
					"orderKey": this.orderNo,
					"payType": this.waysActive,
				};
				console.log("data：",data);
				uni.showLoading({
					mask:true
				})
				this.$Ajax('/api/order/create',
				data,
				res => {
						if(res.code == 200){
							this.$tools.toastJump(res.msg,'/pages/order/order','');
							this.hidePopup('psdPopup');
							uni.hideLoading();
						}
					},err => {
						if(err.code == 300){
							this.$tools.toastBack(err.msg,1);
						}
						uni.hideLoading();
					}
				)
			},
			psdSubmit(){
				if (this.password == '' ) {
					return this.$tools.toast('请输入交易密码');
				}
				var data = {
					"addressId": this.addressId,
					"orderKey": this.orderNo,
					"payPwd": this.$md5(this.password),
					"payType": this.waysActive,
				};
				console.log("data：",data);
				uni.showLoading({
					mask:true
				})
				this.$Ajax('/api/order/create',
				data,
				res => {
						if(res.code == 200){
							this.$tools.toastJump(res.msg,'/pages/order/order','');
							this.hidePopup('psdPopup');
							uni.hideLoading();
						}
					},err => {
						console.log("err：",err);
						if(err.code == 300){
							this.$tools.toastBack(err.msg,1);
						}
						// if(err.errorCode == 1014){
						// 	this.$tools.toastJump('请设置交易密码','/pages/setup/editPayPsd',1);
						// }
						uni.hideLoading();
					}
				)
			},
			checkActive(index){
				if(this.waysActive != index){
					this.waysActive = index;
				}
			},
			// 查询地址列表
			getAddrList(){
				var data = {};
				uni.showLoading({
					mask:true
				})
				this.$Ajax('/api/address/getUserAddress',
				data,
				res => {
						this.pages = res.data.pages;
						this.userAddressList = this.userAddressList.concat(res.data.list);
						this.userAddressList.forEach((item,index) =>{
							// console.log(this.address_id == '' || this.address_id == undefined || this.address_id == null)
							if(this.address_id == '' || this.address_id == undefined || this.address_id == null){
								if(item.remark == '1'){
									this.address = item;
									this.addressId = item.id;
								}else{
									if(index == 0){
										this.address = item;
										this.addressId = item.id;
									}
								}
							}else{
								if(this.address_id == item.id){
									this.address = item;
									this.addressId = item.id;
								}else{
									if(index == 0){
										this.address = item;
										this.addressId = item.id;
									}
								}
							}
						})
						// console.log("this.address:",this.address);
						uni.hideLoading();
					}, err => {
						uni.hideLoading();
					}
				)
			},
			redece(){
				if(this.num > 1){
					this.num --;
				}else{
					this.num = 1;
				}
			},
			add(){
				this.num ++;
			},
			/* 弹出框公用 */
			openPopup(e, item) {
				this.popupInfo = item;
				this.$refs[e].open();
			},
			hidePopup(e) {
				this.$refs[e].close();
				this.password = '';
			},
			changePopup(e) {
				console.log('popup ' + e.type + ' 状态', e.show);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pagesbg{
		padding-bottom: 200rpx;
	}
	
	.orderWays{
		margin-bottom: 12rpx;
		&-wrapper{
			margin: 12rpx 20rpx 0;
			position: relative;
			background: #FFFFFF;
			border-radius: 20rpx;
		}
		&-box{
			background: #FFFFFF;
			border-radius: 20rpx;
			@include flexLeft;
			width: 100%;
			padding: 38rpx 20rpx;
			position: relative;
			z-index: 2;
			.img{
				width: 48rpx;
				height: 48rpx;
			}
			.news{
				@include flexLeftColumn;
				margin: 0 36rpx 0 20rpx;
				width: calc(100% - 48rpx - 56rpx - 24rpx);
				.addr{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #3D3D3D;
					word-break: break-all;
				}
				.tips{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
				.data{
					@include flexLeft;
					margin-bottom: 16rpx;
					.info{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #131414;
						margin-right: 20rpx;
					}
				}
			}
			.next{
				width: 24rpx;
				height: 24rpx;
			}
		}
	}
	
	.goods{
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 44rpx 42rpx;
		margin: 0 20rpx;
		&-list{
			@include flexLeftColumn;
			&__item{
				@include flexLeft;
				margin-bottom: 26rpx;
				width: 100%;
				.imgBox{
					background: #EDEDED;
					width: 180rpx;
					height: 180rpx;
					margin-right: 28rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.content{
					@include flexLeftColumn;
					width: calc(100% - 208rpx);
					.name{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #1D1F1E;
						word-break: break-all;
						@include initMoreLine(2);
					}
					.norms{
						@include flexLeftColumn;
						margin: 22rpx 0 34rpx;
						&-title{
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #525252;
							margin-bottom: 10rpx;
						}
						&-ways{
							background: #131414;
							border-radius: 8rpx;
							@include flexCenter;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
							padding: 6rpx 14rpx;
						}
						image{
							width: 24rpx;
							height: 20rpx;
							margin-left: 16rpx;
							transform: rotate(90deg)
						}
					}
					.operateBox{
						@include flexBetween;
						width: 100%;
						.price{
							font-family: DIN, DIN;
							font-weight: 700;
							font-size: 32rpx;
							color: #131414;
						}
						&-box{
							@include flexRight;
							image{
								width: 40rpx;
								height: 40rpx;
							}
							input{
								font-family: PingFangSC-Semibold, PingFangSC-Semibold;
								font-weight: 400;
								font-size: 26rpx;
								color: #3A3D3B;
								width: 76rpx;
								text-align: center;
							}
						}
					}
				}
			}
		}
	}
	
	.contentBoxBg{
		border-radius: 16rpx;
		margin: 10rpx 20rpx;
	}
	
	.confirmBottom{
		position: fixed;
		bottom: 0;
		width: 100vw;
		background: #ffffff;
		padding: 16rpx 22rpx 68rpx 32rpx;
		@include flexBetween;
		&-left{
			@include flexLeft;
			.title{
				font-family: PingFangSC-Medium, PingFangSC-Medium;
				font-weight: 400;
				font-size: 24rpx;
				color: #0D0A06;
				.active{
					font-family: PingFangSC-Medium, PingFangSC-Medium;
					font-weight: 400;
					font-size: 40rpx;
					color: #1D90F8;
					&::before{
						content: '￥';
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 36rpx;
						color: #1D90F8;
						margin-top: 8rpx;
					}
				}
			}
		}
		&-right{
			@include flexRight
			.btn{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				padding: 20rpx 62rpx 18rpx;
				background: linear-gradient( 135deg, #0067F2 0%, #3DBBFF 99%);
				border-radius: 39rpx;
			}
		}
	}
	
</style>